type BaseElementProps = {
  position: { x: number; y: number };
  width: number;
  height: number;
};

type Prettify<T> = {
  [K in keyof T]: T[K];
};

type ElementProps =
  | {
      id: string;
      type: "text";
      layer: number;
      props: Prettify<
        BaseElementProps & {
          color: string;
          fontSize: number;
          text: string;
        }
      >;
    }
  | {
      id: string;
      type: "image";
      layer: number;
      props: Prettify<
        BaseElementProps & {
          src: string;
          description: string;
        }
      >;
    };

const element: ElementProps = {
  id: "A",
  type: "text",
  layer: 1,
  props: {
    position: { x: 1, y: 1 },
    width: 1,
    height: 1,
    color: "#000",
    fontSize: 1,
    text: "ABCD",
  },
};

const manyElements: ElementProps[] = [element] as ElementProps[];

const newManyElements = manyElements.map((item) => ({
  ...item,
  props: {
    ...item.props,
    width: 20,
  },
}));

console.log(newManyElements);

type Getter<out T> = () => T;
type Setter<in T> = (value: T) => void;

const getWidth: Getter<number> = () => 1;
const setWidth: Setter<1> = (value: number) => {
  console.log(value);
};

type AM = [number, ...(number | undefined)[]];
